import React from 'react';
import { Picker, Icon,List, DatePicker } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';

@withRouter
class ScrollSelect extends React.Component {

  constructor (props) {
    super(props)
    this.state = { ...props }
  }

  componentWillMount () {

  }


  componentWillReceiveProps(newProps){
    const { isShow: oldValue } = this.props;
    const { isShow: newValue } = newProps;
    if(oldValue != newValue){
      // this.state = { ...newProps }
      let {isShow} = this.state;
      this.setState({isShow:newValue})
    }
  }
  

  getLabel = (value) => {
    const { data } = this.state
    if (!value) {
      return "请选择"
    }

    let label = ""
    data.forEach((d, i) => {
      if (d.value == value) {
        label = d.label
      }
    })
    return label
  }

  getDateLabel = () =>{
    const {value} = this.state
    return value;
  }

  onPickChange = (value) => {
    const { onChange } = this.state
    // console.log(typeof value);

    if(typeof value === "string"){
      this.setState({
        value,
        visible: false
      })
    }else{
      this.setState({
        value: value.join(","),
        visible: false
      })
    }


    if (typeof onChange === "function") {
      if(typeof value === "string"){
        onChange(value);
      }else{
        onChange(value.join(","));
      }
     
    }
  }

  render() {
    const { data = [], width = 80, height = 30, visible = false, bgcolor = "#fff", value, title, isDate = false, dateMode = "year",isShow = true,cols = 1 } = this.state

    return (
      <div className="workrelate-mobile-scrollselect" style={{display:`${isShow == true?"inline-block":"none"}`}}>
       {isDate ? 
       <DatePicker
           required
           placeholder="请输入"
           mode={dateMode}
           value = {value}
           onChange={ this.onPickChange }
      >
         <span className="select-wrapper" style={{ width, height, backgroundColor: bgcolor }} onClick={ () => { this.setState({ visible: !visible }) } }>
            <span className="label">
              {
                this.getDateLabel()
              }
            </span>
            <span>
              <Icon type="down" size="xs" />
            </span>
          </span>
       </DatePicker> :
        <Picker
          title={ title }
          data={ data }
          value={ [value] }
          visible={ visible }
          onChange={ this.onPickChange }
          onDismiss={ () => { this.setState({ visible: false }) } }
          cols={cols}
        > 
          <span className="select-wrapper" style={{ width, height, backgroundColor: bgcolor }} onClick={ () => { this.setState({ visible: !visible }) } }>
            <span className="label">
              {
                this.getLabel(value)
              }
            </span>
            <span>
              <Icon type="down" size="xs" />
            </span>
          </span>
        </Picker> 
       }
      </div>
    )
  }
}

export default ScrollSelect